<template>
  <button @click="isShowUl = !isShowUl">点我显示或隐藏</button><br />
  <span>样式</span>
  <ul @click.prevent="clickul('这是msg', $event, '这是info')" v-show="isShowUl">
    <li
      :class="liClass"
      @click="clickli"
      v-for="(link, index) in linkList"
      :key="index"
    >
      <a :href="link.href" target="_blank" @click.stop="clicka"
        >{{ link.name }}{{ index + 1 }}</a
      >
    </li>
  </ul>
  <!-- <slot-counter
    :counterName="compName"
    @changeNoStyle="changeLiClass($event, 'java')"
    @changeCircleStyle="changeLiClass($event, 'python')"
  >
    <template #guest><strong>秘书</strong></template>
    <template v-slot:position>
      <h1>{{ compName }}</h1>
    </template>
  </slot-counter> -->
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import SlotCounter from "./countersLearn/SlotCounter.vue";
let compName = ref("侧边栏");
let isShowUl = ref(true);

let liClass = ref("");
function changeLiClass(sonClass: string, caseName: string) {
  console.log("默认的event对象是", event);
  console.log("父元素接收到的sonClass参数是", sonClass, caseName);
  console.log("父组件自己传参是", caseName);
  liClass.value = sonClass;
}

let linkList = reactive([
  { name: "百度一下", href: "https://www.baidu.com" },
  { name: "腾讯课堂", href: "https://ke.qq.com" },
  { name: "拉勾招聘", href: "https://www.lagou.com" },
]);
//用来验证传参。
function clickul(msg: string, event: Event, info: string) {
  console.log("msg的值", msg);
  console.log("info的值", info);
  console.log("event.target的值：", event.target);
}

function clickli() {
  console.log("---------li元素被点击了");
}

function clicka() {
  console.log("***********a元素被点击了");
}
</script>

// scoped只影响自己组件范围内的内容
<style scoped>
.noClass {
  list-style-type: none;
  font-size: larger;
}

.circleClass {
  list-style-type: circle;
  font-size: small;
}

span {
  color: red;
}
</style>

//不加scoped则影响全局
<style>
/* span {
  color: blue;
} */
</style>
